<template>
  <div>
    <Echart
      id="centreLeft3Chart"
      :options="options"
      height="4.5rem"
      width="4.125rem"
    ></Echart>
  </div>
</template>
<script type="text/javascript" src="utils/echarts-auto-tooltip.js"></script>
<script>
import Echart from '@/common/echart';
export default {
  data() {
    return {
      options: {}
    };
  },
  components: {
    Echart
  },
  props: {
    cdata: {
      type: Object,
      default: () => ({})
    },
  },
  watch: {
    cdata: {
      handler(newData) {
        this.options = {
          tooltip: {
            trigger: 'axis',
            backgroundColor: "rgba(255,255,255,0.1)",
            borderColor:  "rgba(255,255,255,0.1)",
            borderWidth: "0",
            textStyle: {
              fontSize: 14,
              lineHeight: 22,
              color: "#fff"
            },
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          xAxis: {
            type: 'category',
            data: newData.xData,
            axisLabel: { interval: 0, rotate: 30 },
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              type: "bar",
              data: newData.seriesData
            }
          ]
        }
      },
      immediate: true,
      deep: true
    }
  }
};
</script>
